/*
 * Copyright (C) 2017-2019 Dremio Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 @import "~@app/uiTheme/less/color-schema.less";

 .base {
  cursor: pointer; // todo: use css to make all <label>s cursor:pointer?
  display: inline-flex;
  position: relative;
  align-items: center; // This looks off in FF<=50 (DX-8124) - but resolving messes up the latest versions of browsers
  padding-top: 3px; // a hack to have checkbox label align with a text for a new field name. TODO is there a better way to resolve this?

  :global(.checked) {
    border: 1px solid @BLUE;
    color: @BLUE;
  }
};

.disabled {
  composes: unavailable disabled from '@app/uiTheme/less/typography.less';
  cursor: default;
}

.label-content {
  line-height: 24px;
  display: flex;
  //padding-top: 4px;
  min-width: 0; // flex gives children min width auto. Override so parent label can control size.
}

.dummy {
  @size: 14px;
  flex-shrink: 0;
  text-align: center;
  font-size: 9px;
  width: @size;
  height: @size;
  padding: 1px;
  margin: 0 5px 0 0;
  border: 1px solid #bbb;
  border-radius: 1px;
  background: #fff;
  vertical-align: text-bottom
}

input:focus ~ .dummy {
  outline: 1px dotted @GREY
}

.checkbox-standalone {
  .dummy {
    margin-top: -1px;
    align-self: baseline;
  }

  .label-content {
    line-height: 1.1;
  }
}
